// https://api.github.com/search/repositories?q=react&sort=stars

import React, { useEffect,useState } from 'react'
// 1- 引入axios
import axios from "axios";

export default function App(props) {
    // 2- 定义一个存储结果的状态
    const [items, setItems] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    //3- 调用接口
    useEffect(() => {
        axios.get('https://api.github.com/search/repositories?q=react&sort=stars').then(value => {
            setItems(value.data.items);
            setIsLoading(false);
        })
       
    })
  return (
      <div>
          {
              isLoading ? <h3>正在加载中...</h3> : items.map(item => (
                  <p key={item.id}>{item.full_name}</p>
                ))
          }

    </div>
  )
}

